<template>
	<view class="banner">
		<view class="title">
			邀请好友注册
		</view>
		<view class="desc">
			兑换Pro会员
		</view>
		<view class="c1"></view>
		<view class="c2"></view>
		<view class="c3"></view>
		<view class="c4"></view>
		<view class="c5"></view>
	</view>
</template>

<script>

</script>

<style lang="scss" scoped>
	.banner {
		margin-top: -320rpx;
		margin-left: 70rpx;
		margin-bottom: 40rpx;
		position: relative;


		.title {
			font-size: 60rpx;
			font-weight: bold;
			position: relative;
			z-index: 9;
			color: #222;
			text-shadow: 0rpx 5rpx 15rpx rgba(0, 0, 0, .4);
		}

		.desc {
			font-size: 50rpx;
			font-weight: bold;
			position: relative;
			// background: linear-gradient(to right, #ffa829, #e80000);
			// -webkit-background-clip: text;
			// -webkit-text-fill-color: transparent;
			z-index: 9;
			color: #0067d2;
			text-shadow: 0rpx 5rpx 15rpx rgba(0, 0, 0, .2);
		}

		.c1 {
			width: 300rpx;
			height: 300rpx;
			border-radius: 50%;
			background-image: linear-gradient(-35deg, rgba(255, 255, 255, .3), rgba(255, 255, 255, .1));
			position: absolute;
			top: -150rpx;
			left: -150rpx;
		}

		.c2 {
			width: 100rpx;
			height: 100rpx;
			border-radius: 50%;
			background-image: linear-gradient(-35deg, rgba(255, 255, 255, .8), rgba(255, 255, 255, .2));
			position: absolute;
			top: 0;
			left: 400rpx;
		}

		.c3 {
			width: 20rpx;
			height: 20rpx;
			border-radius: 5rpx;
			background: rgba(255, 255, 255, .8);
			position: absolute;
			top: 0;
			right: 100rpx;
			transform: rotate(45deg);
		}

		.c4 {
			width: 20rpx;
			height: 20rpx;
			border-radius: 5rpx;
			background: rgba(255, 255, 255, .6);
			position: absolute;
			top: 180rpx;
			left: 0;
			transform: rotate(45deg);
		}

		.c5 {
			width: 250rpx;
			height: 250rpx;
			border-radius: 50%;
			background: rgba(255, 255, 255, .5);
			position: absolute;
			top: 100rpx;
			right: -100rpx;
		}

	}
</style>